<template>
  <div v-if="formData" class="question-wrapper">
    <div class="top">
      <span>题目名称:</span>
      <n-input
        v-if="debug"
        style="flex: 1; width: 100%"
        placeholder="请输入题目名称"
        :value="questionName"
        :disabled="false"
        type="textarea"
      ></n-input>
      <div class="question-name" v-else>{{ questionName }}</div>
    </div>
    <div class="content">
      <div class="title">选项:</div>
      <div class="option-wrapper" v-if="debug">
        <div
          :class="['option', correctValue == item.value ? 'active' : '']"
          v-for="(item, index) in options"
        >
          <div class="option-title">[选项{{ index }}] {{ item.label }}</div>
        </div>
      </div>
      <div class="option-wrapper" v-else>
        <div
          @click="handleOptionSelect(item.value)"
          v-if="formData.select?.indexOf"
          :class="[
            'option',
            formData.select?.indexOf(item.value) != -1 ? 'active' : '',
          ]"
          v-for="(item, index) in options"
        >
          <div class="option-title">[选项{{ index }}] {{ item.label }}</div>
        </div>
      </div>
    </div>
    <commentComp
      :descriptionTip="descriptionTip"
      :descriptionType="descriptionType"
      :descriptionFileSize="descriptionFileSize"
      :descriptionFileType="descriptionFileType"
      :debug="debug"
      :prop="prop"
      :readonly="readonly"
      :defaultFiles="defaultFiles"
    ></commentComp>
    <div v-if="tip && readonly == false" class="tip">
      <div class="title">本题说明</div>
      <n-input
        style="flex: 1; width: 100%"
        placeholder="请填写说明"
        :value="tip"
        :disabled="false"
        type="textarea"
      ></n-input>
    </div>
    <!-- <div class="question-content">
        <div></div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, PropType, onMounted, computed } from "vue";
import { useFormStore } from "@/store/form";
import commentComp from "../../sub-components/comment.vue";
const formStore = useFormStore();
const props = defineProps({
  data: Object as PropType<any>,
  questionName: String,
  options: Object as PropType<Array<any>>,
  description: String,
  tip: String,
  correctValue: Array<String>,
  descriptionTip: String,
  descriptionType: Number,
  debug: Boolean,
  prop: String,
  descriptionFileSize: Number,
  descriptionFileType: Array<String>,
  readonly: Boolean,
  defaultFiles: Array<any>,
});
const formData = computed({
  get() {
    return formStore.submitInfo[props.prop];
  },
  set(val) {
    formStore.submitInfo[props.prop] = val;
  },
});
const handleOptionSelect = (value: string) => {
  if (props.readonly) {
    return;
  }
  // formStore.submitInfo[props.prop] = value;
  console.log(value, formData.value);
  // formData.value.select = value;
  if (!formData.value.select) {
    formData.value.select = [];
  }
  if (formData.value.select.indexOf(value) == -1) {
    formData.value.select.push(value);
  } else {
    formData.value.select.splice(formData.value.select.indexOf(value), 1);
  }
  formData.value.isComplete = true;
};
onMounted(() => {
  console.log(formData.value, formStore.submitInfo, props.prop);

  if (!formData.value) {
    formData.value = {
      select: [],
      description: "",
      files: [],
      isComplete: false,
    };
  }
});
</script>

<style lang="scss" scoped>
.question-wrapper {
  width: 100%;
  text-align: left;
  .question-name {
    font-size: 16px;
    font-weight: bold;
  }
  .title {
    font-weight: bold;
    width: 70px;
  }
  .content {
    text-align: left;
    display: flex;
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    .option-wrapper {
      width: 100%;
      .option {
        flex: 1;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 6px;
        margin-bottom: 12px;
        box-sizing: border-box;
        cursor: pointer;
      }
      .dark .option {
        background-color: #111;
      }
      .option:hover {
        background-color: #63e2b733;
      }
      .active {
        border: 1px solid #63e2b799;
        background-color: #63e2b733;
      }
    }
  }
  .description {
    display: flex;
    .description-wrapper {
      width: 100%;
      .n-input {
        margin-bottom: 12px;
      }
    }
  }
  .tip {
    display: flex;

    margin-top: 12px;
  }
}
.top {
  display: flex;
  span {
    white-space: nowrap;
    margin-right: 12px;
    font-weight: bold;
  }
}
.dark .option {
  background-color: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
</style>
